<template>
    <div class="kickback_header">
        <div class="left">
            <div>可提现(元): <span>{{withdrawable}}</span></div>
            <div>累计提现(元): <span>{{withdrawned}}</span></div>
        </div>
        <div class="right">
            <van-button round type="default" class="money" @click="withdrawnAll">立即提现</van-button>
        </div>
    </div>
    <div class="kickback">
        <div class="item" v-for="commission in commissionList" :key="commission.id">
            <div class="left">
                <div class="img">
                    <img :src="commission.business.avatar_text" alt="">
                </div>
                <div class="content">
                    <div class="nickname">订单号：{{commission.order.code}}</div>
                </div>
            </div>
            <div class="right">
                <!-- <div class="status">{{commission.status=='1'?'已结算':'待结算'}}</div> -->
                <van-button type="success" size="mini" class="status" disabled v-if="commission.status=='1'">已提现</van-button>
                <van-button type="success" size="mini" class="status" v-else @click="withdrawn(commission.id)">提现</van-button>
                <div class="money">+{{commission.amount}}</div>
            </div>
        </div>
    </div>

    <Tabbar />
</template>
<script setup>
    const {proxy} = getCurrentInstance()
    const commissionList = ref([])
    const withdrawable = computed(()=>{
        return commissionList.value.reduce((pre,curr)=>{
            if(curr.status=='0'){
                return pre+parseFloat(curr.amount)
            }
            return pre
        },0)
    })
    const withdrawned = computed(()=>{
        return commissionList.value.reduce((pre,curr)=>{
            if(curr.status=='1'){
                return pre+parseFloat(curr.amount)
            }
            return pre
        },0)
    })
    onBeforeMount(() => {
        getCommissionList()
    })
    const getCommissionList = async()=>{
        let result = await proxy.$GET({url:'/business/commission'})
        commissionList.value = result
    }
    const withdrawn = async(id)=>{
        let result = await proxy.$PUT({
            url:'/business/commission',
            params:{id}
        })
        result.code=='1'?showSuccessToast(result.msg):showFailToast(result.msg)
        getCommissionList()
    }
    const withdrawnAll = async()=>{
        let result = await proxy.$PUT({
            url:'/business/commission',
        })
        result.code=='1'?showSuccessToast(result.msg):showFailToast(result.msg)
        getCommissionList()
    }
</script>
<style scoped>
    @import url('/assets/css/SaleMoney.css');
</style>